<script setup>
import ChatReply from "@/components/ChatReply.vue";
import ChatPrompt from "@/components/ChatPrompt.vue";
import {nextTick, onMounted, ref} from "vue";
import {useRouter} from "vue-router";
import {httpGet} from "@/utils/http.js";
import 'highlight.js/styles/a11y-dark.css'
import hl from "highlight.js";
import {ElMessage} from "element-plus";
import Clipboard from "clipboard";
import MarkDownIt from 'markdown-it'

const chatData = ref([])
const router = useRouter()
// 从URL路径中获取参数
const chatId = router.currentRoute.value.query['chat_id']
const loading = ref(true)
const chatTitle = ref('')

// 初始化数据
const initData = () => {
  // 加载会话历史记录
  httpGet('api/chat/history?chat_id=' + chatId).then(res => {
    const data = res.data
    if (!data) {
      loading.value = false
      return
    }

    for (let i = 0; i < data.length; i++) {
      if (data[i].type === 'prompt') {
        chatData.value.push(data[i])
        continue
      } else if (data[i].type === 'mj') {
        data[i].content = JSON.parse(data[i].content)
        data[i].content.content = data[i].content?.content
        chatData.value.push(data[i])
        continue
      }
      data[i].orgContent = data[i].content
      data[i].content = data[i].content
      chatData.value.push(data[i])
    }

    nextTick(() => {
      hl.configure({
        ignoreUnescapedHTML: true // 不要在控制台中记录有关代码块中未转义 HTML 的警告})
      })
      // querySelectorAll 使用组合选择器查找所有 <pre> 标签内嵌套的 <code> 标签
      const blocks = document.querySelector('#chat-box').querySelectorAll('pre code')
      blocks.forEach((block) => {
        // 将高亮显示应用于包含代码的 DOM 节点。
        hl.highlightElement(block)
      })
    })
    loading.value = false
  }).catch(e => {
    ElMessage.error('加载聊天记录失败：'+e.message)
  })

  // 加载会话信息
  httpGet('api/chat/detail?chat_id='+chatId).then(res => {
    chatTitle.value = res.data.title
  }).catch(e => {
    ElMessage.error('加载会话信息失败：'+e.message)
  })
}

onMounted(() => {
  initData()
  const clipboard = new Clipboard('.copy-reply')
  clipboard.on('success',() => {
    ElMessage.success('复制成功！')
  })
  clipboard.on('error',() => {
    ElMessage.success('复制失败！')
  })
})
</script>

<template>
  <div class="chat-export" v-loading="loading">
    <div class="chat-box" id="chat-box">
      <div class="title pt-4">
        <h2>{{chatTitle}}</h2>
      </div>
      <div v-for="item in chatData" :key="item.id">
        <chat-prompt v-if="item.type === 'prompt'" :data="item" list-style="list"/>
        <chat-reply v-else-if="item.type === 'reply'" :data="item" :read-only="true" list-style="list" />
      </div>
    </div>
  </div>
</template>

<style scoped lang="stylus">
.chat-export {
  display flex
  justify-content center
  padding 0 20px

  .chat-box {
    width 100%;
    // 变量定义
    --content-font-size: 16px;
    --content-color: #c1c1c1;

    font-family: 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
    padding: 0 0 50px 0;

    .title {
      text-align center
    }

    .chat-line {
      font-size: 14px;
      display: flex;
      align-items: center;

      .chat-line-inner {
        max-width 800px
      }
    }
  }
}
</style>